<template>
    <div class="left-menu">
        <div class="menu">
            <el-menu
            router
            @select="selectItem"
            class="el-menu-vertical-demo"
            :collapse="close"
            :default-active="defaultActive"
            >
           
                <menu-item :data="menuList"></menu-item>

            </el-menu>
        </div>
        <div class="switch-main">
            <div class="switch" @click="closeMenu">
                <i :class="close?'el-icon-arrow-right':'el-icon-arrow-left'"></i>
            </div>
        </div>
        
    </div>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
    data(){
        return{
            close:false,
            defaultActive:''
        }
    },
    props:['active','menuList'],
    methods:{
        closeMenu(){
            this.close=!this.close;

        },
        selectItem(index,path){

            // console.log(path)
           
            
        }
    },
    created(){

       
        this.defaultActive = this.active;
      
      
       
        
    },
    components:{

        'menu-item':MenuItem

    }

}
</script>

<style scoped>

.left-menu{
    display: flex;
    justify-content: center;
}

.switch-main{
    height: 100%;
    /* display: flex;
    align-items: center; */
   
    margin: auto 0;

}

.switch{
    /* margin-left: 10px; */
    position: absolute;
    width: 16px;
    cursor:pointer;

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 700px;
  }


</style>